<%@ page import="au.org.ala.phylojive.Tree" %>
<!doctype html>
<html>
	<head>
		<meta name="layout" content="main"/>
		<title>Phylojive | Atlas of Living Australia</title>
        <style type="text/css">
        table#trees td, table#trees th {
            border-left:solid 40px transparent;
        }
        table#trees td:first-child, table#trees th:first-child {
            border-left:0;
        }
        </style>
	</head>
	<body>
    <div id="content">
        <header id="page-header">
            <div class="inner">
                <nav id="breadcrumb">
                    <ol class="breadcrumb">
                        <li><a href="http://www.ala.org.au">Home</a> <span class=" icon icon-arrow-right"></span></li>
                        %{--<li><a href="#">Second breadcrumb (change me)</a></li>--}%
                        <li class="last">Phylojive</li>
                    </ol>
                </nav>
                <h1>Phylojive</h1>
            </div><!--inner-->
        </header>
        <div class="">
            <div id="section" class="row-fluid">
                <g:if test="${flash.message}">
                    <div class="message" role="status">${flash.message}</div>
                </g:if>
                <div id="description" class="span7">
                    <p>
                        PhyloJive&nbsp;(<span style="text-decoration: underline;">Phylo</span>geny
                        <span style="text-decoration: underline;">J</span>avascript <span style="text-decoration: underline;">I</span>nformation
                        <span style="text-decoration: underline;">V</span>isualiser and <span style="text-decoration: underline;">E</span>xplorer)
                    is a web based application that places biodiversity information aggregated from many sources onto compact phylogenetic trees.
                    </p>
                    <p>
                        The project&nbsp;is the brainchild of <a href="http://www.cpbr.gov.au/cpbr/staff/jolley-rogers-staff.html" target="_blank">Garry Jolley-Rogers</a>
                        and <a href="http://www.anbg.gov.au/cpbr/staff/miller-joe-staff.html" target="_blank">Joe Miller</a> and was developed by
                    Temi Varghese and <a title="Garry Jolley Rogers" href="http://www.cpbr.gov.au/cpbr/staff/jolley-rogers-staff.html" target="_blank">Garry Jolley-Rogers</a>
                        as part of the <a href="http://www.taxonomy.org.au/" target="_blank">Taxonomy Research &amp; Information Network (TRIN)</a> – see
                    the <a href="http://wiki.trin.org.au/HubRIS.PhyloJive.WebHome" target="_blank">original project page</a>,
                    <a href="https://github.com/TRIN/jit" target="_blank">original code repository</a> and
                    <a href="http://code.google.com/p/ala-phylojive/" target="_blank">ALA code repository</a>. The ALA has contributed to the
                    PhyloJive&nbsp;codebase&nbsp;to integrate a number of web services: occurrence data, maps and character data
                    from Identify Life. This work has been undertaken with help and advice from <a title="Joe Miller" href="http://www.anbg.gov.au/cpbr/staff/miller-joe-staff.html" target="_blank">Joe Miller</a>.
                    </p>
                    <p>
                        The <g:link mapping="getting-started">getting started</g:link> page outlines the steps for creating a new phylogenetic tree and contains
                        demo data sets that can be used to get up and running.
                    </p>
                    <br/>
                    <p>
                        <button id="newTreeButton" class="btn btn-small" onclick="location.href='${createLink(controller:"tree", action:"create")}'">Create a new tree</button>
                    </p>

                </div>
                <div id="screenshot" class="span5">
                    <img src="${resource(dir: 'images', file: 'phylojive_screenshot.png')}" alt="screenshot example"/>
                </div>
            </div>
            <div class="row-fluid">
                <div style="clear:both;"></div>

                <table id="trees" class="" style="margin-top: 10px;">
                    <thead style="text-align: left;">
                        <tr>
                            <th><h2>Trees with character data</h2></th>
                            <th><h2>&quot;Bare&quot; Trees</h2></th>
                        </tr>
                    </thead>
                    <tbody style="vertical-align: top;">
                        <tr>
                            <td>
                                <g:each in="${Tree.findAllByCharactersNotEqualOrCharactersIsNull("", [max: 100, sort: "highlight", order: "desc"])}" var="t">
                                    <g:if test="${t.isPublic}">
                                        <li><g:link controller="TreeViewer" action="show" id="${t.name}">${t.name}</g:link></li>
                                    </g:if>
                                </g:each>
                            </td>
                            <td>
                                <g:each in="${Tree.findAllByCharactersOrCharactersIsNull("", [max: 100, sort: "highlight", order: "desc"])}" var="t">
                                    <g:if test="${t.isPublic}">
                                        <li><g:link controller="TreeViewer" action="show" id="${t.name}">${t.name}</g:link></li>
                                    </g:if>
                                </g:each>
                            </td>
                        </tr>
                    </tbody>
                </table>
                %{--<h2>Available Trees</h2>
                <ul>
                    <g:each in="${Tree.findAll()}" var="t">
                        <g:if test="${t.isPublic}">
                            <li><g:link controller="TreeViewer" action="show" id="${t.name}">${t.name}</g:link></li>
                        </g:if>
                    </g:each>
                </ul>--}%
                <g:each in="${(0..2)}"><br/></g:each>
            </div>
		</div>
    </div> <!-- content div -->
	</body>
</html>
